<template>
    <div class="main-template" v-bind:dataValue="showLoading">
        <yd-navbar slot="navbar" title="投资收益" class="public-header">
            <span slot="left">
                <a href="javascript:window.history.go(-1)"><yd-navbar-back-icon></yd-navbar-back-icon></a>
            </span>
        </yd-navbar>
        <div class="public-main-wrap">
            <yd-grids-group :rows="2" title="请选择投资店铺" class="invest-list">
                <yd-grids-item v-for="item in showShop" @click.native="showDetial(item)">
                    <span slot="text" class="invest-img">
                        <img :src="item.image" alt="" >
                    </span>
                    <p slot="text">星奇异</p>
                    <p slot="text">{{item.name}}</p>
                </yd-grids-item>
                <yd-grids-item @click.native="showMoreStore(dataList)" v-show="showShop.length>3">
                    <span slot="text" class="invest-img">
                        <img src="../assets/img/user-pic.jpg" alt="" >
                    </span>
                    <p slot="text">星奇异</p>
                    <p slot="text">查看更多店铺</p>
                </yd-grids-item>
            </yd-grids-group>
            <h3 class="income-titles">{{shopData.name}} </h3>
            <yd-grids-group :rows="2" title="本月收益">
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="th-list" scale="1.5"></icon>
                        </div>
                        <p> 本月累计业绩 {{shopData.monthData.totalAmount}}元</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="pie-chart" scale="1.5"></icon>
                        </div>
                        <p> 平均毛利率 {{shopData.monthData.totalPercent}}%</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="area-chart" scale="1.5"></icon>
                        </div>
                        <p> 经营成本预计 {{shopData.monthData.variableCost}}</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="th-large" scale="1.5"></icon>
                        </div>
                        <p> 本人持股比例{{shopData.monthData.percent}}%</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="line-chart" scale="1.5"></icon>
                        </div>
                        <p> 本人投资收入预计{{shopData.monthData.preIncome}}元</p>
                    </div>
                </yd-grids-item>
            </yd-grids-group>
            <yd-grids-group :rows="4">
                <yd-grids-item :link="basicUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="gear" scale="1.5"></icon>
                        </div>
                        <p>基本信息</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="businessUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="line-chart" scale="1.5"></icon>
                        </div>
                        <p>经营信息</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="holdersUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="address-book" scale="1.5"></icon>
                        </div>
                        <p>股东信息</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item>
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="line-chart" scale="1.5"></icon>
                        </div>
                        <p>项目介绍</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="staffUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="user-circle" scale="1.5"></icon>
                        </div>
                        <p>员工信息</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="shopUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="window-restore" scale="1.5"></icon>
                        </div>
                        <p>店铺资产</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="bonusUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="user-secret" scale="1.5"></icon>
                        </div>
                        <p>分红记录</p>
                    </div>
                </yd-grids-item>
                <yd-grids-item :link="totalUrl">
                    <div slot="text">
                        <div class="grids-icon">
                            <icon name="industry" scale="1.5"></icon>
                        </div>
                        <p>总收益</p>
                    </div>
                </yd-grids-item>
            </yd-grids-group>
        </div>
        <yd-popup v-model="showStore" position="right">
            <yd-cell-item v-for="item in dataList" @click.native="showDetial(item)">
                <span slot="left">{{item.name}}</span>
            </yd-cell-item>
        </yd-popup>
        <yd-tabbar slot="tabbar" class="public-footer">
            <yd-tabbar-item title="首页" link="/">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="投资收益" link="/income" active>
                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="信息交流" link="/message">
                <yd-icon name="like-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="个人中心" link="/user">
                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </div>
</template>
<script>
    import Ajax from "../api/ajax.js"
    import dataURL from "../data/dataURL.js"
    export default {
        data() {
            return {
                resDatas: {
                    user_name: "",
                    invset_count: "",
                    invset_amount: "",
                    share_amount: "",
                    payback_cycle: "",
                    payback_percent: "",
                    avatar: {
                        image: ""
                    }
                },
                resToday: {
                    total_amount: '',// 本店今日营业额
                    total_percent: '',// 本店今日毛利率
                    stock_right_percent: "", //本人持股数
                    person_profit: "" //本人今日毛利
                },
                dataList: [],
                showShop: [],
                showStore: false,
                shopData: {
                    name: "",
                    shop_id: "",
                    monthData: {
                        totalAmount: 0,
                        totalPercent: 0,
                        variableCost: 0,
                        percent: 0,
                        preIncome: 0
                    },
                },
                queryId: '',
                loadBloean: true,
            }
        },
        methods: {
            // 页面初始化调用
            async getData() {
                let res = await Ajax.Post(dataURL.main.info);
                this.resDatas = res;
                let dataAll = [];
                let shopList = await Ajax.Post(dataURL.main.shopList);
                let param = {};
                for (let item of shopList) {
                    let monthData = await Ajax.Post(dataURL.income.monthData, { shop_id: item.shop_id });
                    param = {
                        name: item.shop_info.name,
                        shop_id: item.shop_id,
                        monthData: monthData,
                        image: item.shop_info.cover_pic[0],
                    }
                    dataAll.push(param);
                }
                this.dataList = dataAll;
                this.shopData = dataAll[0];
                console.log(this.shopData);
                this.queryId = this.shopData.shop_id;
                if (this.dataList.length <= 3) {
                    this.showShop = this.dataList;
                } else {
                    this.showShop.push(this.dataList[0])
                    this.showShop.push(this.dataList[1])
                    this.showShop.push(this.dataList[2])
                }
                this.loadBloean = false;
            },
            // 显示店铺的所有收益信息
            showDetial(item) {
                for (let i of this.dataList) {
                    if (i.shop_id == item.shop_id) {
                        this.shopData = i;
                        this.queryId = this.shopData.shop_id
                    }
                }
                this.showStore = false
            },
            // 显示更多店铺
            showMoreStore() {
                this.showStore = true
            },

        },
        computed: {
            active() {
                for (let i in this.dataList) {
                    if (i == 0) {
                        return "active"
                    }
                }
            },
            basicUrl() {
                return '/income/basic?id=' + this.queryId
            },
            businessUrl() {
                return '/income/business?id=' + this.queryId
            },
            holdersUrl() {
                return '/income/holders?id=' + this.queryId
            },
            staffUrl() {
                return '/income/staff?id=' + this.queryId
            },
            shopUrl() {
                return '/income/shop?id=' + this.queryId
            },
            bonusUrl() {
                return '/income/bonus?id=' + this.queryId
            },
            totalUrl() {
                return '/income/total?id=' + this.queryId
            },
            showLoading() {
                if (this.loadBloean) {
                    this.$dialog.loading.open('很快加载好了');
                } else {
                    this.$dialog.loading.close();
                }
            }
        },
        mounted() {
            this.getData();
        }
    }

</script>